﻿<%@page import="com.sun.star.util.URL"%>
<%@page import="java.awt.image.BufferedImage"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page isELIgnored="false"%>



<!DOCTYPE html>
<html lang="zxx">

	<script src="/js/jquery.minimg.js" type="text/javascript"
            charset="utf-8"></script>
	
	<!-- 列表 -->
	<script src="/js/gm/gm.js" type="text/javascript"
            charset="utf-8"></script>
	
	<!-- 时间选择 -->
	<script src="/js/My97DatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
<script>

	function show_file_upload(){
		
		callbackFunction(function() {
			$('#file_upload2').modal('show');
		});
	}


	function show_img_upload() {
		
		callbackFunction(function() {
			$('#file_upload').modal('show');
		});
	}

	//验证是否登录，回调函数，用ajax访问后台服务器
	function callbackFunction(callback) {
	    
		var url= "/login/checkToken";
		
	    $.ajax({
	        url: url, // 替换为你的服务器端点
	        type: 'GET', // 或 'GET'，取决于你的需求
	        success: function(response) {
	            // 请求成功时的回调函数
	        	  if (response.token>0) {
	        callback();
	    } else {
	    	document.getElementById('my-dialog').show();
	    }
	        },
	        error: function(xhr, status, error) {
	            // 请求失败时的回调函数
	            console.error('An error occurred:', error);
	            alert('连接服务器失败，检查网络或者联系管理员');
	        }
	    });
	    // 检查参数是否是一个函数，然后调用它
	}





 function downloadFile(fileName) {

	var url= "/sysfile/download?fileName="+fileName
	
$.ajax({
    url: url, // 替换为你的服务器端点
    type: 'GET', // 或 'GET'，取决于你的需求
    success: function(response) {
        // 请求成功时的回调函数
    	console.log('服务器响应:11', response);
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
        console.error('An error occurred:', error);
        alert('文件暂时不存在，请联系商家');
    }
});
} 

 
 $(document).ready(function() {
     $("#wechat").click(function(){
         var _this = $("#wechatImg");//将当前的img元素作为_this传入函数
			if(_this.parent()[0].localName=="li"){//只有li才放大
				imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
			}
     });

     $("#tiktok").click(function(){
         var _this = $("#tiktokImg");//将当前的img元素作为_this传入函数
			if(_this.parent()[0].localName=="li"){//只有li才放大
				imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
			}
     });
     
     $("#kwi").click(function(){
         var _this = $("#kiwitImg");//将当前的img元素作为_this传入函数
			if(_this.parent()[0].localName=="li"){//只有li才放大
				imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
			}
     });
     
     $("#redbook").click(function(){
         var _this = $("#redbookImg");//将当前的img元素作为_this传入函数
			if(_this.parent()[0].localName=="li"){//只有li才放大
				imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
			}
     });
 });

 
 //登录弹窗，用回车代替点击
 document.addEventListener('DOMContentLoaded', () => {
	    const loginButton = document.getElementById('loginButton');

	    // 监听整个文档的键盘事件
	    document.addEventListener('keydown', (e) => {
	        if (e.key === 'Enter') {
	            // 确保用户名和密码输入框都有值
	                e.preventDefault(); // 阻止默认行为
	                loginButton.click(); // 模拟按钮点击
	        }
	    });

	});
 
</script>


<style>
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: nowrap;
    margin-right: -15px;
    margin-left: -15px;
    justify-content: space-evenly;
}


element.style {
}
@media (min-width: 992px)
.navbar-expand-lg {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.navbar>.container, .navbar>.container-fluid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

element.style {
}
@media (min-width: 992px)
.navbar-expand-lg {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}



@media (min-width: 992px)
.navbar-expand-lg .navbar-collapse {
    display: -ms-flexbox!important;
    display: flex!important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
}

.styled-item {
    display: block;
    background-color: #ff6348;
    color: #fff;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: 600;
}






    dialog {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 10px;
margin-left: auto;
  margin-right: auto;
  width: 20%;
  top: 40%;
  z-index: 99;
  }
  
  
  .alert {
      position: fixed;
      top: 25%;
      left: 50%;
      font-weight: bold;
      transform: translateX(-50%);
      background-color: #f2e6ff;
      color: #4a235a;
      padding: 15px;
      border-radius: 5px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
      display: none;
      transition: opacity 0.5s ease-in-out;
      z-index: 999;
    }

</style>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="keywords" content="">
    <meta name="description" content="">
    
    
    
     <jsp:include page="common/head.jsp"></jsp:include> 
    <script src="/js/fileinput/fileinput.js" type="text/javascript"
            charset="utf-8"></script>
<script src="/js/fileinput/locales/zh.js" type="text/javascript"
        charset="utf-8"></script>
    
    <link rel="stylesheet" type="text/css"
	href="/js/fileinput/fileinput.css">
	
    <!--favicon-->
    <link rel="shortcut icon" type="image/png" href="js/assets/images/favicon.ico">
    <!--bootstrap css-->
<!--     <link rel="stylesheet" type="text/css" href="js/assets/css/bootstrap.min.css"> -->
    <!--owl carousel css-->
    <link rel="stylesheet" type="text/css" href="js/assets/css/owl.carousel.min.css">
    <!--magnific popup css-->
    <link rel="stylesheet" type="text/css" href="js/assets/css/magnific-popup.css">
    <!--font awesome css-->
    <link rel="stylesheet" type="text/css" href="js/assets/css/font-awesome.min.css">
    <!--animate css-->
    <link rel="stylesheet" type="text/css" href="js/assets/css/animate.css">
    <!--main css-->
    <link rel="stylesheet" type="text/css" href="js/assets/css/style.css">
    <!--responsive css-->
    <link rel="stylesheet" type="text/css" href="js/assets/css/responsive.css">
    <link rel="stylesheet" type="text/css" href="js/gm/gm.css">
    
    <link rel="stylesheet" type="text/css" href="css/style2.css" tppabs="css/style2.css" />
</head>

<body>
    <!--start header-->
<header id="header">

<dialog id="my-dialog">
  <p>此功能只对登录用户开放</p>
  &nbsp;&nbsp;&nbsp;
  <button id="close-dialog">关闭弹窗</button>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <button id="open-dialog">登录</button>
</dialog>

<div id="alertBox" style="display: none;" class="alert"></div>


<dialog id="login-dialog" style="top: 25%;width: min-content;background: rgb(255 255 255 / 0%);padding: 0px;">
<dl id="adminLoginModal" class="admin_login" style="background: #ffffff;">
 <dt>
  <strong>旅发订单管理系统</strong>
  <em>Management System</em>
 </dt>
 <form id="form_login" method="post">
 <dd class="user_icon">
  <input type="text" placeholder="账号/手机号码/邮箱" name="username" class="login_txtbx"/>
 </dd>
 <dd class="pwd_icon">
  <input type="password" placeholder="密码" name=password class="login_txtbx"/>
 </dd>
 <dd class="val_icon" id="checkCode" style="display: none;">
  <div class="checkcode" style="display: flex;">
    <input type="text" id="J_codetext" placeholder="输入验证码" name="check_text"  class="login_txtbx">
    <%--  <canvas class="J_codeimg" id="myCanvas" onclick="createCode()">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>  --%>
  <img id="vc_img" alt="" src="/login/VC" onclick="on_img()">
  
  </div>
  <input type="button" value="刷新验证码" class="ver_btn" onClick="on_img();">
 </dd>
 <dd style="height: 110px;">
  <input id="loginButton" type="button" value="立即登陆" class="submit_btn"/>
  <br><br>
  <input id="cancelButton" type="button" value="取消登陆" class="submit_btn"/>
 </dd>
 </form>
 
<!--  <dd>
  <p>© 2015-2016 jq22 版权所有</p>
  <p>陕B2-8998988-1</p>
 </dd> -->
</dl>
</dialog>
        <!--start header top-->
        <div class="header-top">
            <div class="container">
                <div class="row header-top-wrap">
                    <div class="col-md-8">
                        <div class="header-cont-info">
                            <ul>
<li><i class="fa fa-phone"></i> 联系电话: 0771-3166737</li>
                                <li><i class="fa fa-envelope"></i> 邮箱: fanshuting@gxtdgnmol.com</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="header-social text-right">
                            <ul>
                               <li><img id="wechat" src="/img/40ed6229-3377-442f-98d9-1253edbb8de7(1).jpg" style="cursor: pointer;"></li>
                                <li><img id="tiktok" src="/img/4702f986-cd17-4f09-8030-67bda09a44b8(1).jpg" style="border-radius: 15%;width: 37px;cursor: pointer;"></li>
                                <li><img id="kiwit" src="/img/5f3d91a1-71c1-4e62-b2e0-8054cd07cd34(1).jpg" style="border-radius: 15%;width: 37px;cursor: pointer;"></li>
                                <li><img id="redbook" src="/img/c8bfd807-7af1-4656-8b92-93b27bbf2714(1).jpg" style="border-radius: 15%;width: 37px;cursor: pointer;"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end header top-->
        <!--start mainmenu-->
        <div class="mainmenu">
            <div class="container">
                <nav class="navbar navbar-expand-lg"  style="margin-bottom: 0px;">
                    <div class="container">
                        <!--logo-->
                        <a class="logo" href="#"><img src="js/assets/images/logo.png" alt="logo"></a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="icon-bar"><i class="icofont-navigation-menu"></i></span>
                        </button>
                        <!--navbar links-->
                        
                               <ul class="navbar-nav mx-auto text-center">
                                <li class="nav-item">
<a class="nav-link" href="/index?page=company">公司简介</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="/index?page=main" data-scroll-nav="0" style="color: #ff5740;">广告投放</a>
                                </li>
                                <li class="nav-item">
                                    <a id="anchorLink" style="display: none;" class="nav-link" href="#" data-scroll-nav="2">订单合同历史</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="/index?page=contact">联系方式</a>
                                </li>
                            </ul>
                             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="icon-bar"><i class="icofont-navigation-menu"></i></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarContent">
                          
                            <ul class="navbar-nav shop-btn">
                                  <c:choose>
                            <c:when test="${not empty SESSION_LOGIN_USER}">
                                <li class="nav-item">
                                    <a class="nav-link" href="/login/logout" id="logout-link">退出</a>
                                </li>
                                </c:when>
                                <c:otherwise>
                                <li class="nav-item">
                                    <a class="nav-link" href="" onclick="handleLoginClick(); return false;">登录</a>
                                </li>
                                </c:otherwise>
                                </c:choose>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
        <!--end mainmenu-->
    </header>
    <!--end header-->
    <!--start hero area-->
    <section id="hero-area" data-scroll-index="0">
        <div class="container">
            <div class="row">
                <!--start caption-->
                <div class="col-md-7">
                    <div class="caption d-table">
                        <div class="d-table-cell align-middle">
                             <h5>累计投放金额已达100,000,000+</h5>
                            <h1>广告投放</h1>
	            <h3>(抖音、微信、快手、小红书等多种平台)</h3>
                            <p>1、初次合作前请与我方销售代表联系<br>
2、双方确定合同条款后，请盖章扫描后上传，或线下寄给我们<br>
3、合同签订后，需要您按订单模版样式完善信息后上传订单，我们将按订单为您进行广告投放</p>
                            <ul>
                                <li><a href="javascript:void(0);" onclick="show_img_upload()">合同上传<svg xmlns="http://www.w3.org/2000/svg" style="margin-left: 10px;" width="16" height="16" fill="currentColor" class="bi bi-upload" viewBox="0 0 16 16">
  <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
  <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>
</svg></a></li>
                                <li><span><a href="/sysfile/download?fileName=合同模板.docx" class="styled-item">合同模板下载</a></span></li>
                                                            <li><span><a href="javascript:void(0);" onclick="getAjax('imgfile')" class="styled-item">历史合同<svg xmlns="http://www.w3.org/2000/svg" style="margin-left: 10px;" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg></a></span></li>
                            </ul>
                            
                               <ul>
                                <li><a href="javascript:void(0);" onclick="show_file_upload()">订单上传<svg xmlns="http://www.w3.org/2000/svg" style="margin-left: 10px;" width="16" height="16" fill="currentColor" class="bi bi-upload" viewBox="0 0 16 16">
  <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
  <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>
</svg></a></li>
                                <li><span><a href="/sysfile/download?fileName=订单模板.xlsx" class="styled-item">订单模板下载</a></span></li>
                                <li><span><a href="javascript:void(0);" onclick="getAjax()" class="styled-item">历史订单<svg xmlns="http://www.w3.org/2000/svg" style="margin-left: 10px;" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg></a></span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--end caption-->
                <!--start caption image-->
                <div class="col-md-5">
                    <div class="caption-img d-table text-center">
                        <div class="d-table-cell align-middle">
                            <img src="js/assets/images/watch-img-1.png" class="img-fluid" alt="image">
                        </div>
                    </div>
                </div>
                <!--end caption image-->
            </div>
        </div>
    </section>
    <!--end hero area-->
    <!--start about area-->
    <section id="about-area" class="bg-gray" style="display: none;" data-scroll-index="2">
        <div class="container">
            <div class="row" style="display: flex;flex-wrap: wrap;justify-content: flex-start;">
            
<style>            
   .search-area {
    padding: 10px 20px;
    border: 1px solid #ccc;
    background: #efefef;
    margin-bottom: 15px;
}      

.search-area .sa-ele {
    display: inline-block;
    margin-right: 20px;
    font-size: 12px;
}   
    </style>
            <section class="search-area">
    <div class="sa-ele">
        <label class="se-title">文件名:</label>
        <input id="theme" class="se-con" name="title" data-key="theme">
        <input id="imgFile" style="display: none;" class="se-con" name="title" data-key="imgFile">
    </div>
    <div class="sa-ele">
        <label class="se-title">时间段:</label>
        	<input type="text"
			onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
			class="Wdate s_input"
			style="width: 200px; height: 34px; border: 1px solid #ccc; border-radius: 4px; display: inline"
			id="start_time" name="start_time" value="${start_time}"
			placeholder=" 开始时间" data-key="start_time"/> 
			<input type="text" class="Wdate s_input"
			style="width: 200px; height: 34px; border: 1px solid #ccc; border-radius: 4px; display: inline"
			onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="end_time"
			name="end_time" data-key="end_time" value="${end_time}" placeholder=" 结束时间" />
    </div>
    <div  class="sa-ele">
        <button id="reset-gm" class="search-action">搜索</button>
        <button id="clearBtn" class="reset-action">重置</button>
    </div>
</section>
            
            <table grid-manager="cccc"></table>
            	<div class="bottom-bar" style="display: none;" >
		<button id="init-gm" disabled>init</button>
		<button id="destroy-gm" disabled>destroy</button>
		<button id="reset-gm" disabled>重置数据</button>
		<button id="update-tree" disabled>切换展开状态</button>
	</div>
            
            
            
            </div>
        </div>
    </section>
    <!--end about area-->
    <!--start feature area-->


    <footer id="footer">
        <!--start footer bottom-->
        <div class="footer-btm text-center">
            <div class="container">
                <p>© 2025 广西旅发新媒体运营有限公司 版权所有</p>
            </div>
        </div>
        <!--end footer bottom-->
        
        
        <div id="file_upload" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 id="operateTitle2" class="modal-title">上传合同</h4>
			</div>
			<div class="modal-body">
				<form id="learningForm2" class="form-horizontal"
					enctype="multipart/form-data" action="/maint/upload" method="post">
					<div class="form-group">
						<label for="fileInput" class="col-sm-3 control-label">附件：</label>
						<div class="col-sm-9">
							<input id="fileInput" name="files" multiple type="file" class="file" value="" accept=".png,.jpg,.pnf"/>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>



        <div id="file_upload2" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 id="operateTitle2" class="modal-title">上传订单</h4>
			</div>
			<div class="modal-body">
				<form id="learningForm2" class="form-horizontal"
					enctype="multipart/form-data" action="/maint/upload" method="post">
					<div class="form-group">
						<label for="fileInput" class="col-sm-3 control-label">附件：</label>
						<div class="col-sm-9">
							<input id="fileInput2" name="files" multiple type="file" class="file" 
							accept=".xlsx,.xls" value=""/>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>


<style>
* {
    margin: 0;
    padding: 0;
}
#imglist {
    list-style: none;
    width: 500px;
    margin: 50px auto;
}
#imglist li {
    float: left;
    margin-top: 10px;
}
li img {
    cursor: zoom-in;
}
</style>
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
  <div id="innerdiv" style="position:absolute;"><img id="bigimg" style="border:5px solid #fff;" src="" /></div>
</div>
<ul id="imglist" style="display: none;"><div>点击图片查看放大效果</div>
  <li><img id="wechatImg" style="display: none;" src="/img/2.jpg" width="200px" /></li>
  <li><img id="tiktokImg" style="display: none;" src="/img/dual-watch.png" width="200px" /></li>
  <li><img id="kiwitImg" style="display: none;" src="/img/watch-5.png" width="200px" /></li>
  <li><img id="redbookImg" style="display: none;" src="/img/watch-6.png" width="200px" /></li>
</ul>

        
         <script type="text/javascript">
         
         //此功能只对登录用户开放，是否现在登录，点击登陆调用这个事件函数
         document.getElementById('open-dialog').addEventListener('click', function() {
        	 
        	 document.getElementById('my-dialog').close();
        	 handleLoginClick();
        	 /* adminLoginModal.classList.add('show'); 
        	 document.getElementById('login-dialog').show(); */
     	  });
         
         
         document.getElementById('close-dialog').onclick = function() {
        	    document.getElementById('my-dialog').close();
        	  };
        	  
        	  
        	  $("#cancelButton").click(function(){
        			 
        		  document.getElementById('login-dialog').close();
        		 }
        	  );
        	  
        	  
        	  $("#loginButton").click(function(){
        		  /*location.href="javascrpt:;"/*tpa=http://***index.html*/;

        		  var form = document.getElementById('form_login');
        		  
        		  // 创建一个FormData对象来存储表单数据
        		  var formData = new FormData(form);
        		 
        		  // 创建一个XMLHttpRequest对象
        		  var xhr = new XMLHttpRequest();
        		 
        		  // 配置请求：使用POST方法，设置请求的URL（后台处理表单数据的端点）
        		  xhr.open('POST', '/login/login', true);
        		 
        		  // 设置请求头（如果需要的话，比如Content-Type对于FormData通常是自动设置的）
        		  // xhr.setRequestHeader('Content-Type', 'multipart/form-data'); // 这行通常不需要，因为FormData会自动设置
        		 
        		  // 定义请求完成时的回调函数
        		  xhr.onload = function() {
        		    if (xhr.status === 200) {
        		      // 请求成功，处理响应数据
        		      console.log('Form submitted successfully!');
        		      console.log(xhr.responseText);
        		      var responseData = JSON.parse(xhr.responseText);
        		      if(responseData.success>0){
        		    	  alert('您已成功登录！');
        		    	  location.reload();
        		    	  }else{
        		    		  alertBox.innerHTML = responseData.loginInfo;
        		      if(responseData.isCheck>3){
        		    	  checkCode.classList.add('show');
        		      }
        		      // 显现提示框
        		      showAlert();
        		      }
        		      //location.reload();
        		    } else {
        		      // 请求失败，处理错误情况
        		      console.error('Form submission failed with status:', xhr.status);
        		    }
        		  };
        		 
        		  // 定义请求出错时的回调函数
        		  xhr.onerror = function() {
        		    console.error('An error occurred during the AJAX request.');
        		  };
        		 
        		  // 发送请求，带上表单数据
        		  xhr.send(formData);
                  columnData.splice(1, 1);
                  console.log(columnData);
        		  });
        	  
        	  
        	  const logoutLink = document.getElementById('logout-link');
              // 拦截点击事件
              logoutLink.addEventListener('click', function(event) {
                  // 阻止默认的跳转行为
       
                  // 弹出提示框
                  alert('您已成功退出！');
              });
              
              //点击右上角的“登录”按钮，触发这个事件函数
              function handleLoginClick() {
            	  
            	  var url= "/login/checkToken";
          		
          	    $.ajax({
          	        url: url, // 替换为你的服务器端点
          	        type: 'GET', // 或 'GET'，取决于你的需求
          	        success: function(response) {

                        adminLoginModal.classList.add('show'); // 添加 show 类，显示元素
                   	 document.getElementById('login-dialog').show();
          	        	
          	        	  if (response.isCheck>3) {
          	        		checkCode.classList.add('show');
          	    } 
          	        },
          	        error: function(xhr, status, error) {
          	            // 请求失败时的回调函数
          	            console.error('An error occurred:', error);
          	            alert('连接服务器失败，检查网络或者联系管理员');
          	        }
          	    });
                  adminLoginModal.classList.add('show'); // 添加 show 类，显示元素
        	 document.getElementById('login-dialog').show();
                  // 你可以在这里添加其他逻辑，比如跳转到登录页面或显示登录表单
              }
              
              
              function showAlert() {
            	    var alertBox = document.getElementById('alertBox');
//            	    alertBox.textContent = '这是一个提示！';
            	    alertBox.style.display = 'block';

            	    //3秒后隐藏提示框
            	    setTimeout(function() {
            	      alertBox.style.opacity = '0';
            	      setTimeout(function() {
            	        alertBox.style.display = 'none';
            	        alertBox.style.opacity = '1';
            	      }, 500);
            	    }, 3000);
            	  }

              
              function on_img() {
            		document.getElementById('vc_img').src='/login/VC?'+Math.random();
            	}              
         
 $("#fileInput").fileinput({
        language: 'zh', //设置语言
        uploadUrl: '/sysfile/uploadImg', //上传的地址
        showUpload: true, //是否显示上传按钮
        showCaption: true,//是否显示标题
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        maxFileCount: 1, //表示允许同时上传的最大文件个数
        fileActionSettings:{showUpload: true}, // 控制上传按钮是否显示
        preferIconicPreview: true, // 开启用图标替换预览效果
        allowedFileExtensions: ['png','jpg','pnf'], 
        previewFileIconSettings: { // configure your icon file extensions
            'doc': '<i class="fa fa-file-word-o text-primary"></i>',
            'xls': '<i class="fa fa-file-excel-o text-success"></i>',
            'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
            'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
            'txt': '<i class="fa fa-file-text-o text-info"></i>',
            'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
            'htm': '<i class="fa fa-file-code-o text-info"></i>',
            'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
            'mp3': '<i class="fa fa-file-audio-o text-warning"></i>'
        },
        previewFileExtSettings: {
            'doc': function(ext) {
                return ext.match(/(doc|docx)$/i);
            },
            'xls': function(ext) {
                return ext.match(/(xls|xlsx)$/i);
            },
            'ppt': function(ext) {
                return ext.match(/(ppt|pptx)$/i);
            },
            'zip': function(ext) {
                return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
            },
            'htm': function(ext) {
                return ext.match(/(htm|html)$/i);
            },
            'mov': function(ext) {
                return ext.match(/(swf|mp4)$/i);
            },
            'mp3': function(ext) {
                return ext.match(/(mp3|wav)$/i);
            },
            'txt': function(ext) {
                return ext.match(/(txt)$/i);
            }
        },
        layoutTemplates:{ // 预览图片按钮控制，这里屏蔽预览按钮
            actionZoom:'',
            actionDelete:''
        }
    }).on("fileuploaded", function(event, data, previewId, index){
    	var flag=data.response;
    	if(flag==1){
    		alert("格式不符合标准，上传失败");
    		jumpTo(null)
    	}else{
        	alert("上传成功");
        	$('#file_upload').modal('hide');
        	jumpTo(null)
    	};
    }).on('fileclear', function(event) {
        $("#attachmentIds").val("");
    });
 
 
 $("#fileInput2").fileinput({
     language: 'zh', //设置语言
     uploadUrl: '/sysfile/uploadExcel', //上传的地址
     showUpload: true, //是否显示上传按钮
     showCaption: true,//是否显示标题
     previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
     maxFileCount: 1, //表示允许同时上传的最大文件个数
     fileActionSettings:{showUpload: true}, // 控制上传按钮是否显示
     preferIconicPreview: true, // 开启用图标替换预览效果
     allowedFileExtensions: ['xlsx','xls'], 
     previewFileIconSettings: { // configure your icon file extensions
         'doc': '<i class="fa fa-file-word-o text-primary"></i>',
         'xls': '<i class="fa fa-file-excel-o text-success"></i>',
         'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
         'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
         'txt': '<i class="fa fa-file-text-o text-info"></i>',
         'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
         'htm': '<i class="fa fa-file-code-o text-info"></i>',
         'mov': '<i class="fa fa-file-movie-o text-warning"></i>',
         'mp3': '<i class="fa fa-file-audio-o text-warning"></i>'
     },
     previewFileExtSettings: {
         'doc': function(ext) {
             return ext.match(/(doc|docx)$/i);
         },
         'xls': function(ext) {
             return ext.match(/(xls|xlsx)$/i);
         },
         'ppt': function(ext) {
             return ext.match(/(ppt|pptx)$/i);
         },
         'zip': function(ext) {
             return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
         },
         'htm': function(ext) {
             return ext.match(/(htm|html)$/i);
         },
         'mov': function(ext) {
             return ext.match(/(swf|mp4)$/i);
         },
         'mp3': function(ext) {
             return ext.match(/(mp3|wav)$/i);
         },
         'txt': function(ext) {
             return ext.match(/(txt)$/i);
         }
     },
     layoutTemplates:{ // 预览图片按钮控制，这里屏蔽预览按钮
         actionZoom:'',
         actionDelete:''
     }
 }).on("fileuploaded", function(event, data, previewId, index){

data.response.filename
 	
 	alert(data.response.filename+"文件上传成功"); 
$('#file_upload2').modal('hide');
jumpTo(null);
 }).on('fileclear', function(event) {
     $("#textName").val("");
 });
 
 
 
 //拟态框放大图片展示控件
 function imgShow(outerdiv, innerdiv, bigimg, _this){
	    var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
	    $(bigimg).attr("src", src);//设置#bigimg元素的src属性
	        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
	    $("<img/>").attr("src", src).load(function(){
	        var windowW = $(window).width();//获取当前窗口宽度
	        var windowH = $(window).height();//获取当前窗口高度
	        var realWidth = this.width;//获取图片真实宽度
	        var realHeight = this.height;//获取图片真实高度
	        var imgWidth, imgHeight;
	        var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
	        if(realHeight>windowH*scale) {//判断图片高度
	            imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
	            imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
	            if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
	                imgWidth = windowW*scale;//再对宽度进行缩放
	            }
	        } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
	            imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
	            imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
	        } else {//如果图片真实高度和宽度都符合要求，高宽不变
	            imgWidth = realWidth;
	            imgHeight = realHeight;
	        }
	        $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放
	        var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
	        var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
	        $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
	        $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
	    });
	    $(outerdiv).click(function(){//再次点击淡出消失弹出层
	        $(this).fadeOut("fast");
	    });
	}
 
 </script>
    
    
    
    
     	<script>
     	//管理员可自定义历史订单查询每页显示的条数
     	var pageSize=10;
     	
		// 给init方法的数据，从ajax获取
		var ajaxData1 = {
			
		};


		var ajaxData2 = {
			
		};


        var columnData = [{
            key: 'fileName',
            remind: 'the fileName',
            sorting: 'up',
            width: '200px',
            text: '文件名'
        },{
            key: 'showTime',
            remind: 'the createDate',
            sorting: 'down',
            width: '130px',
            text: '上传时间'
        },{
            key: 'uploadUser',
            remind: 'the createDate',
            sorting: 'down',
            width: '200px',
            text: '上传该文件的用户',
            align: 'center'
        },{
            key: 'operation',
            remind: '修改创建时间',
            sorting: '',
            width: '130px',
            text: '下载订单文件',
            template: function(operation, rowObject){
                console.log('文件', rowObject);
                console.log('下载元素', rowObject.insysName);
                var inputElement = document.getElementById('imgFile').value;
                //var downloadUrl = '/sysfile/download?fileName=' + rowObject.insysName;
                var url="window.location.href='/sysfile/download?id="+rowObject.id+"&&imgfile="+inputElement+"'";
                console.log('url', url);
                return `<button onclick=`+url+` style="margin-left:30px;"class="plugin-action">下载</button>`;
            }
        }
        ];

		 document.getElementById('clearBtn').addEventListener('click', function() {
			  // 通过ID逐个清空
			  document.getElementById('theme').value = '';
			  document.getElementById('start_time').value = '';
			  document.getElementById('end_time').value = '';
			});
		
		
		
		function getAjax(imgFile) {
			//document.getElementById('about-area').style.display = 'block';
			$.ajax({
			    url: "/getAjaxData",
			    data: {pSize : pageSize,
			    	imgFile : imgFile},
			    dataType: "json",
			    type: "post",
			    success: function(data) {
			    	document.getElementById('about-area').style.display = 'block';
			    	var inputElement = document.getElementById('imgFile');
			    	if(imgFile != null){
		            // 设置新的值
		            inputElement.value =imgFile;
			    }else{
			    	inputElement.value =null;
			    }
			        if (data != null) { // 检查 data 是否为 null 或空数组
			        	ajaxData1 = data;
                        console.log("rolerolerolerolerolerole"+data.role)
                        if (data.role>0){
                        columnData.splice(2, 1);
                    }
			        	init();
			        	document.getElementById('anchorLink').click();
			        } else {
			            // 处理 data 为 null 或空数组的情况
			            console.error('数据为空');
			        }
			    },
			    error: function(jqXHR, textStatus, errorThrown) {
			        // 错误处理回调
			        console.error('AJAX Error: ' + textStatus + ', ' + errorThrown);
			        // 您可以在这里显示一个用户友好的错误消息，比如使用 alert() 或更新页面上的某个元素
			        
			    	document.getElementById('my-dialog').show();
			    }
			});
			
		}
		
	</script>
	<script type="text/javascript">
		// 实例化
		var table = document.querySelector('table[grid-manager]');
		function init(){
			
			table.GM({
                gridManagerName:'test',
                // topFullColumn: {
                //     template: function(){
                //         return `<div style="padding: 12px; text-align: center;">
                //                 快速、灵活的对Table标签进行实例化，让Table标签充满活力。该项目已开源,
                //                 <a target="_blank" href="https://github.com/baukh789/GridManager">点击进入</a>
                //                 github
                //            </div>`;
                //     }
                // },
				emptyTemplate: '<div class="gm-empty-template">什么也没有</div>',
                supportAjaxPage: true,
                // supportCheckbox: false,
                // supportAutoOrder: false,
                supportTreeData: true,
                treeConfig: {
                    // insertTo: 'age',
                    openState: false,
                    treeKey: 'children'
                },
				ajaxData: ajaxData1,
                // useRadio: true,
				pageSize:pageSize,
				query: ajaxData2,
				pageSize:pageSize,
				query: /* {ex: '用户自定义的查询参数,格式:{key:value}'}, */ajaxData2,
				columnData: columnData,
				pagingBefore:function(query){
					console.log('Event: 分页前', query);
				},
				pagingAfter: function(query){
					console.log('Event: 分页后', query);
					
					var inputElement = document.getElementById('imgFile');
					query.imgFile = inputElement.value;

						$.ajax({
						    url: "/getAjaxData",
						    data: query,
						    dataType: "json",
						    type: "post",
						    success: function(data) {
						        if (data != null) { // 检查 data 是否为 null 或空数组

						        	GM.setAjaxData('test', data, function(data){
										console.log('setAjaxData', data);
									});
						        	
						        } else {
						            // 处理 data 为 null 或空数组的情况
						            console.error('数据为空');
						        }
						    },
						    error: function(jqXHR, textStatus, errorThrown) {
						        // 错误处理回调
						        console.error('AJAX Error: ' + textStatus + ', ' + errorThrown);
						        // 您可以在这里显示一个用户友好的错误消息，比如使用 alert() 或更新页面上的某个元素
						        alert('请求发生错误了，请检查');
						        document.getElementById('my-dialog').show();
						    }
						});
					
					
					
					
					GM.setAjaxData('test', ajaxData2, function(data){
		 				console.log('setAjaxData', data);
		 			});
				},
				sortingBefore:function(query){
					console.log('Event: 排序前', query);
				},
				sortingAfter: function(query){
					console.log('Event: 排序后', query);
				},
				ajaxSuccess: function(data){
					console.log('Event: ajaxSuccess', data);
				},
                checkedAfter: function(list){
                    console.log(list);
                }
			}, function(query){
				// 渲染完成后的回调函数
				console.log(query);
				// GM.setCheckedData('test', ajaxData1.data[2]);
			});
		}
	</script>
	<script>

		var initDOM = document.getElementById('init-gm');
		var destroyDOM = document.getElementById('destroy-gm');
		var resetDOM = document.getElementById('reset-gm');
		var updateTreeDOM = document.getElementById('update-tree');
		// 绑定初始化事件
		initDOM.onclick = function(){
			init();
			initDOM.setAttribute('disabled', '');
			destroyDOM.removeAttribute('disabled');
			resetDOM.removeAttribute('disabled');
		};

		// 绑定消毁事件
		destroyDOM.onclick = function(){
            GM.destroy('test');
			initDOM.removeAttribute('disabled');
			destroyDOM.setAttribute('disabled', '');
			resetDOM.setAttribute('disabled', '');
		};

		function getAjaxData(pars) { //从后端获取数据传给表控件
			
			console.dir(pars);

			$.ajax({
			    url: "/getAjaxData",
			    data: pars,
			    dataType: "json",
			    type: "post",
			    success: function(data) {
			        if (data != null) { // 检查 data 是否为 null 或空数组

			        	ajaxData1 = data;
			        	ajaxData2 =pars;
			        	init()
			        	
			             /* GM.setAjaxData('test', data, function(data){
			 				console.log('setAjaxData', data); */
			 				
			 			//});
			        } else {
			            // 处理 data 为 null 或空数组的情况
			            console.error('数据为空');
			        }
			    },
			    error: function(jqXHR, textStatus, errorThrown) {
			        // 错误处理回调
			        console.error('AJAX Error: ' + textStatus + ', ' + errorThrown);
			        // 您可以在这里显示一个用户友好的错误消息，比如使用 alert() 或更新页面上的某个元素
			        alert('请求发生错误了，请检查');
			        document.getElementById('my-dialog').show();
			    }
			});
		}
		
		
		// 点击搜索以后发生的函数事件
		resetDOM.onclick = function(){
			const inputData = {};
			 
		    // 使用 document.querySelectorAll 来选择所有具有 data-key 属性的 input 元素
		    const inputs = document.querySelectorAll('input[data-key]');
		 
		    // 遍历这些 input 元素
		    inputs.forEach(input => {
		        // 从 data-key 属性中获取键名
		        const key = input.getAttribute('data-key');
		        // 从 input 元素的值中获取对应的值
		        const value = input.value;
		 
		        // 将键值对存储到对象中
		        inputData[key] = value;
		        
		        console.log("pars:"+key);
		    });
		 
		    key = "pSize";
		    inputData[key] = pageSize;
		    
		    var inputElement = document.getElementById('imgFile');
		    key2 = "imgFile";
		    inputData[key2] = inputElement.value;
		    // 打印结果对象
		    //console.log("pars:"+inputData);
			//ajaxData4=inputData;
			//init();
		    getAjaxData(inputData);
		    
		    
/* 		    console.log("newData:"+newData);
			newData = newData === ajaxData2 ? ajaxData1 : ajaxData2;
            GM.setAjaxData('test', newData, function(data){
				console.log('setAjaxData', data);
			}); */
		};

		// 绑定更新树打开状态事件
        let openState = false;
        updateTreeDOM.onclick = function(){
            openState = !openState;
            GM.updateTreeState('test', openState);
        };
        
        //getAjax();
		// 初始进入时, 执行init 方法
		//init();
		initDOM.setAttribute('disabled', '');
		destroyDOM.removeAttribute('disabled');
		resetDOM.removeAttribute('disabled');
        updateTreeDOM.removeAttribute('disabled');
		jTool(table).on('click', '.plugin-action', function(e) {
            const row = GM.getRowData('test', this.parentElement.parentElement);
            GM.updateRowData('test', 'id', {id: row.id, createDate: new Date().toLocaleDateString()});
        });
	</script>
        
    </footer>
    <!--end footer-->
    <!--jQuery js-->
<!--     <script src="js/assets/js/jquery-3.3.1.min.js"></script> -->
    <!--proper js-->
    <script src="js/assets/js/popper.min.js"></script>
    <!--bootstrap js-->
<!--     <script src="js/assets/js/bootstrap.min.js"></script> -->
    <!--magnic popup js-->
    <script src="js/assets/js/magnific-popup.min.js"></script>
    <!--owl carousel js-->
    <script src="js/assets/js/owl.carousel.min.js"></script>
    <!--scrollIt js-->
    <script src="js/assets/js/scrollIt.min.js"></script>
    <!--contact js-->
    <script src="js/assets/js/contact.js"></script>
    <!--validator js-->
    <script src="js/assets/js/validator.min.js"></script>
    <!--main js-->
    <script src="js/assets/js/custom.js"></script>
</body>





</html>
